{% extends 'one_two_many_base.html' %}

{% block title_name %}
    {{ form_info['name'] }} Management
{% endblock %}

{% block add_form %}
    <div class="card mb-4">
        <div class="card-header">
            Add New Record
        </div>
        <div class="card-body">
            <form id="addForm">
                {% for k, v in form_info['columns'].items() %}
                    {% if v['type'] == 'form-select' %}
                        <div class="mb-3">
                            <label for="{{ v['id'] }}" class="form-label">Select with search:</label>
                            <select class="selectpicker" multiple data-live-search="true" id="{{ v['id'] }}">
                                {% for info in many_info_display %}
                                    <option value="{{ info[0] }}">{{ info[1] }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    {% else %}
                        <div class="mb-3">
                            <label for="{{ v['id'] }}" class="form-label">{{ v['list_title'] }}</label>
                            <input type="{{ v['type'] }}" class="form-control" id="{{ v['id'] }}">
                        </div>
                    {% endif %}
                {% endfor %}
                <button type="submit" class="btn btn-primary">Add {{ form_info['name'] }}</button>
            </form>
        </div>
    </div>
{% endblock %}

{% block table %}
    <div class="card">
        <div class="card-header">
            {{ form_info['name'] }}s
        </div>
        <div class="card-body">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    {% for k, v in form_info['columns'].items() %}
                        <th>{{ v['list_title'] }}</th>
                    {% endfor %}
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody id="recordsTable">
                {% for item in items %}
                    <tr>
                        <td>{{ item.id }}</td>
                        {% for k, v in form_info['columns'].items() %}
                            <td>{{ item[v['id']] }}</td>
                        {% endfor %}
                        <td>
                            <button class="btn btn-sm btn-warning" onclick="editRecord({{ item.id }})">Edit</button>
                            <button class="btn btn-sm btn-danger" onclick="deleteRecord({{ item.id }})">Delete</button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="card-footer">
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center mt-4">
                    <!-- 上一页按钮 -->
                    {% if page_obj.has_prev %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.prev_num }}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    {% endif %}

                    <!-- 页码 -->
                    {% for page_num in range(1, page_obj.pages + 1) %}
                        {% if page_num == page_obj.page %}
                            <li class="page-item active"><a class="page-link"
                                                            href="?page={{ page_num }}">{{ page_num }}</a></li>
                        {% else %}
                            <li class="page-item"><a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}

                    <!-- 下一页按钮 -->
                    {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_num }}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </div>
{% endblock %}

{% block edit_form %}
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Edit {{ form_info['name'] }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editForm">
                        <input type="hidden" id="editId">
                        {% for k, v in form_info['columns'].items() %}
                            {% if v['type'] == 'form-select' %}
                                <div class="mb-3">
                                    <label for="edit{{ v['id'] }}" class="form-label">Select with search:</label>
                                    <select class="selectpicker" multiple data-live-search="true"
                                            id="edit{{ v['id'] }}">
                                        {% for info in many_info_display %}
                                            <option value="{{ info[0] }}">{{ info[1] }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            {% else %}
                                <div class="mb-3">
                                    <label for="edit{{ v['id'] }}" class="form-label">{{ v['list_title'] }}</label>
                                    <input type="{{ v['type'] }}" class="form-control" id="edit{{ v['id'] }}">
                                </div>
                            {% endif %}
                        {% endfor %}
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}



{% block script %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const addForm = document.getElementById('addForm');
            addForm.addEventListener('submit', function (event) {
                event.preventDefault();

                let formInfo = {}
                {% for k, v in form_info['columns'].items() %}
                    {% if v['type']=='form-select' %}
                        const {{ v['id'] }} = $("#{{ v['id'] }}").val();
                        formInfo['{{ v['id'] }}'] = {{ v['id'] }}
                    {% else %}
                        const {{ v['id'] }} = document.getElementById("{{ v['id'] }}").value;
                        formInfo['{{ v['id'] }}'] = {{ v['id'] }}
                    {% endif %}
                {% endfor %}



            fetch('/{{ form_info['api_name'] }}s', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formInfo),
            }).then(response => {
                if (response.ok) {
                    location.reload();
                    addForm.reset();
                }
            });
            });

            const editForm = document.getElementById('editForm');
            editForm.addEventListener('submit', function (event) {
                event.preventDefault();
                const index = document.getElementById('editId').value;
                let editFormInfo = {}
                {% for k, v in form_info['columns'].items() %}
                    {% if v['type']=='form-select' %}
                        const {{ v['id'] }} = $("#edit{{ v['id'] }}").val();
                        editFormInfo['{{ v['id'] }}'] = {{ v['id'] }}
                    {% else %}
                        const {{ v['id'] }} = document.getElementById("edit{{ v['id'] }}").value;
                        editFormInfo['{{ v['id'] }}'] = {{ v['id'] }}
                    {% endif %}
                {% endfor %}

            fetch(`/{{ form_info['api_name'] }}s/${index}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(editFormInfo),
            }).then(response => {
                if (response.ok) {
                    location.reload();
                    const editModal = new bootstrap.Modal(document.getElementById('editModal'));
                    editModal.hide();
                }
            });
            });
        });

        function editRecord(index) {
            fetch(`/{{ form_info['api_name'] }}s/` + `${index}`)
                .then(response => response.json())
                .then(record => {
                    let val = ''
                    document.getElementById('editId').value = index;
                    {% for k, v in form_info['columns'].items() %}
                        {% if v['type']=='form-select' %}
                            $("#edit{{ v['id'] }}").val(record['{{ v['id'] }}']);
                        {% else %}
                            document.getElementById("edit{{ v['id'] }}").value = record['{{ v['id'] }}'];
                        {% endif %}
                    {% endfor %}
                    const editModal = new bootstrap.Modal(document.getElementById('editModal'));
                    editModal.show();
                });
        }

        function deleteRecord(index) {
            fetch(`/{{ form_info['api_name'] }}s/${index}`, {
                method: 'DELETE',
            }).then(response => {
                location.reload()
            });
        }
    </script>
{% endblock %}




